<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <script src="/admin/common/js/jquery.min.js" type="text/javascript"></script>
    <script src="/admin/common/js/alpaca-spa-2.0.js" type="text/javascript"></script>

    <script src="/admin/main/main.js" type="text/javascript"></script>
    <script src="/admin/main/controller/auth.js" type="text/javascript"></script>
    <script src="/admin/main/controller/data.js" type="text/javascript"></script>
    <script src="/admin/main/controller/monitor.js" type="text/javascript"></script>

    <link href="{{= g_baseUrl}}main/assets/monitor/monitor.css" rel="stylesheet">
    <link href="/admin/common/video/video-js.min.css" rel="stylesheet">

    <title>显示屏</title>
</head>
<body>

<div id="showScreen">
    <div class="header">
        <div class="header-logo float-left">
            <div class="header-logo-img"><img src="{{= g_baseUrl}}main/assets/monitor/images/logo.png"></div>
            <div class="header-logo-tit">
                <p>实时安全识别展示</p>
                <p id="realtime">1990-01-02 00:00:00</p>
            </div>
        </div>
        <div class="people-count">
            <div class="people-count-tit">
                <p>实时</p>
                <p>统计</p>
            </div>
            <ul class="clearfix">
                <li>
                    <p>实时进场</p>
                    <p><span id="count-realtime-in">0000000</span>人次</p>
                </li>
                <li>
                    <p>实时出场</p>
                    <p><span id="count-realtime-out">0000000</span>人次</p>
                </li>
                <li>
                    <p>检图量</p>
                    <p><span id="count-realtime-total">0000000</span>人次</p>
                </li>
                <li>
                    <p>核对成功</p>
                    <p><span id="count-realtime-right">0000000</span>人次</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="content">
        <div class="content-left">
            <div class="fixed-access-count">
                <div class="count-clot-big">
                    <i class="lt-riangle"></i>
                    <i class="rb-riangle"></i>
                    <p>固定门禁</p>
                </div>
                <div class="count-clot-small">
                    <i class="lt-riangle"></i>
                    <i class="rb-riangle"></i>
                    <p>识别人次</p>
                    <p><span id="fix_recode_times">0000</span></p>
                </div>
                <div class="line-icon-big"></div>
                <div class="line-icon-normal"></div>
                <div class="line-icon-small"></div>
            </div>
            <div class="fixed-access-detail">
                <!-- 设备列表 -->
                <div class="access-detail-filter">
                    <i class="lt-riangle"></i>
                    <i class="rb-riangle"></i>
                    <div class="filter-search">
                        <select id="device_list">
                            <option value="0">固定门禁号</option>
                        </select>
                        <i class="down-arrow"></i>
                    </div>
                </div>

                <!-- 直播窗口 -->
                <div class="access-detail-img">
                    <i class="lt-arrow"></i>
                    <i class="lb-arrow"></i>
                    <i class="rt-arrow"></i>
                    <i class="rb-arrow"></i>

                    <div class="img-box" id = 'video_box'>
                        <video id="monitor_live" class="video-js vjs-default-skin"
                               poster="{{= g_baseUrl}}main/assets/monitor/images/demo-img1.png"
                               controls preload="auto" width="938" height="398">
                            <source id = "monitor_live_src"
                                    src="#"
                                    type="application/x-mpegURL">
                        </video>
                    </div>
                </div>

                <div class="access-detail-info">
                    <i class="lt-arrow"></i>
                    <i class="lb-arrow"></i>
                    <i class="rt-arrow"></i>
                    <i class="rb-arrow"></i>
                    <div class="info-inner clearfix">
                        <div class="personnel-img"><img src="{{= g_baseUrl}}main/assets/monitor/images/demo-img1.png">
                        </div>
                        <div class="personnel-info float-right">
                            <div class="personnel-info-img"><img
                                    src="{{= g_baseUrl}}main/assets/monitor/images/profile.jpg" alt=""/></div>
                            <dvi class="personnel-info-text">
                                <p><strong>人员信息</strong></p>
                                <p><span>姓名：</span>XXX</p>
                                <p><span>出入标志：</span>XXXX</p>
                                <p><span>证件类型：</span>XXXX</p>
                                <p><span>证件编号：</span><br/>XXXXXXXXXXX</p>
                            </dvi>
                        </div>
                    </div>
                    <div class="access-status">识别中...</div>
                </div>
            </div>
            <div class="fixed-access-record">
                <div class="record-tit"><i class="lt-riangle"></i><i class="rb-riangle"></i>识别记录</div>
                <div class="record-list" id="fix-access-list">

                </div>
            </div>
        </div>
        <div class="content-right">
            <div class="content-right-tit clearfix">
                <div class="count-clot-big">
                    <i class="lt-riangle"></i>
                    <i class="rb-riangle"></i>
                    <p>移动门禁</p>
                </div>
                <div class="count-clot-small">
                    <i class="lt-riangle"></i>
                    <i class="rb-riangle"></i>
                    <p>识别人次</p>
                    <p><span id='record-times'>0000</span></p>
                </div>
                <div class="line-big"></div>
                <div class="line-normal"></div>
                <div class="line-small"></div>
            </div>
            <!-- 移动门禁识别记录 -->
            <div class="mobile-access-list"></div>
        </div>
    </div>
</div>
</body>
</html>